<template>
  <div class="p-3">
    <!-- 内容 -->
    <div>
      <!-- 搜索栏 -->
      <div class="form">
        <div class="fs-3" @click="router.push('/')">公告信息</div>

        <!-- search -->
        <div>
          <NForm inline>
            <NFormItem>
              <NInput v-model:value="queryInfo.title" placeholder="搜索标题"></NInput>
            </NFormItem>
            <NFormItem>
              <NInput v-model:value="queryInfo.content" placeholder="搜索内容"></NInput>
            </NFormItem>
            <NFormItem>
              <NInput v-model:value="queryInfo.username" placeholder="搜索用户名"></NInput>
            </NFormItem>
            <NFormItem>
              <NSpace>
                <NButton @click="requery" type="info">查询</NButton>
                <NButton @click="reset" type="error">重置</NButton>
                <NButton @click="showAdd" type="primary">添加</NButton>
              </NSpace>
            </NFormItem>
          </NForm>
        </div>
      </div>

      <!-- 表格 -->
      <div>
        <NDataTable :columns="columns" :data="list" :loading="tableLoading"></NDataTable>
      </div>

      <!-- 分页 -->
      <div class="page">
        <NFlex justify="center">
          <NPagination
            v-model:page="queryInfo.pageNumber"
            :page-size="queryInfo.pageSize"
            :item-count="page.total"
            @update-page="queryList"
          ></NPagination>
        </NFlex>
      </div>
    </div>

    <!-- 弹窗 -->
    <div>
      <!-- 添加 -->
      <div>
        <NModal v-model:show="addVisible" title="添加公告信息" preset="dialog">
          <div>
            <NForm>
              <NFormItem label="标题">
                <NInput v-model:value="addInfo.title"></NInput>
              </NFormItem>
              <NFormItem label="发布人">
                <NInput v-model:value="addInfo.username"></NInput>
              </NFormItem>
              <NFormItem label="内容">
                <NInput v-model:value="addInfo.content" type="textarea"></NInput>
              </NFormItem>
            </NForm>
          </div>

          <template #action>
            <NSpace justify="end">
              <NButton type="primary" @click="add" :loading="addLoading">发布</NButton>
            </NSpace>
          </template>
        </NModal>
      </div>

      <!-- 修改 -->
      <div>
        <NModal v-model:show="modifyVisible" title="修改公告信息" preset="dialog" type="warning">
          <div>
            <NForm>
              <NFormItem label="标题">
                <NInput v-model:value="modifyInfo.title"></NInput>
              </NFormItem>
              <NFormItem label="发布人">
                <NInput v-model:value="modifyInfo.username"></NInput>
              </NFormItem>
              <NFormItem label="内容">
                <NInput v-model:value="modifyInfo.content" type="textarea"></NInput>
              </NFormItem>
              <NFormItem label="置顶信息">
                <NInputNumber v-model:value="modifyInfo.topIndex" type="textarea"></NInputNumber>
              </NFormItem>
            </NForm>
          </div>

          <template #action>
            <NSpace justify="end">
              <NButton type="warning" @click="modify" :loading="modifyLoading">保存</NButton>
            </NSpace>
          </template>
        </NModal>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  useMessage,
  useDialog,
  NDataTable,
  type DataTableColumn,
  NSpace,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NFlex,
  NPagination,
  NModal,
  NInputNumber,
} from 'naive-ui'
import type { TbBillboard } from '@/types/crud'
import { h, onMounted, ref } from 'vue'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
const router = useRouter()
const message = useMessage()
const dialog = useDialog()

//#region 查询
const list = ref([] as Array<TbBillboard>)
const tableLoading = ref(false)
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const queryInfo = ref({
  title: '',
  content: '',
  username: '',
  pageNumber: page.value.pageNumber,
  pageSize: page.value.pageSize,
})

const queryList = () => {
  tableLoading.value = true
  Api.get('/crud/billboard', queryInfo.value, (data: BaseDataResult<PageVO<TbBillboard>>) => {
    tableLoading.value = false
    if (data.success) {
      list.value = data.data.list
      page.value = data.data.pageBean
      return
    }
    message.error(data.message)
  })
}

onMounted(() => {
  queryList()
})

const requery = () => {
  page.value.pageNumber = 1
  queryList()
}

const reset = () => {
  queryInfo.value.title = ''
  queryInfo.value.content = ''
  queryInfo.value.username = ''
  requery()
}

//#endregion

// #region 添加
const addInfo = ref({} as TbBillboard)
const addVisible = ref(false)
const addLoading = ref(false)

const showAdd = () => {
  tableLoading.value = true
  addInfo.value.username = ''
  addInfo.value.title = ''
  addInfo.value.content = ''
  tableLoading.value = false
  addVisible.value = true
}

const add = () => {
  addLoading.value = true
  Api.post('/crud/billboard', addInfo.value, (data: BaseResult) => {
    addLoading.value = false
    if (data.success) {
      addVisible.value = false
      requery()
      message.success('添加成功')
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 修改
const modifyInfo = ref({} as TbBillboard)
const modifyVisible = ref(false)
const modifyLoading = ref(false)

const getModifyInfo = (info: TbBillboard) => {
  Api.get(`/crud/billboard/${info.bid}`, {}, (data: BaseDataResult<TbBillboard>) => {
    if (data.success) {
      info.content = data.data.content
      showModify(info)
      return
    }
    message.error(data.message)
  })
}

const showModify = (info: TbBillboard) => {
  tableLoading.value = true
  modifyInfo.value = Tools.concatJson(info) as TbBillboard
  tableLoading.value = false
  modifyVisible.value = true
}

const modify = () => {
  modifyLoading.value = true
  Api.put('/crud/billboard', modifyInfo.value, (data: BaseResult) => {
    if (data.success) {
      modifyVisible.value = false
      requery()
      message.success('修改成功')
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 查看内容
const queryBillboardInfo = (info: TbBillboard) => {
  tableLoading.value = true
  Api.get(`/crud/billboard/${info.bid}`, {}, (data: BaseDataResult<TbBillboard>) => {
    tableLoading.value = false
    if (data.success) {
      info.content = data.data.content
      showContent(info)
      return
    }
    message.error(data.message)
  })
}

const showContent = (info: TbBillboard) => {
  dialog.info({
    title: `${info.title}`,
    content: `${info.content}`,
    style: { height: '300px' },
    contentStyle: { marginTop: '30px' },
  })
}

//#endregion

//#region 删除
const showDelete = (info: TbBillboard) => {
  dialog.error({
    title: '警告',
    content: `确定删除${info.title}吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      Api.delete(`/crud/billboard/${info.bid}`, {}, (data: BaseResult) => {
        if (data.success) {
          message.success('删除成功')
          requery()
          return
        }
        message.error(data.message)
      })
    },
  })
}
//#endregion

// table数据
const columns = [
  { title: '标题', key: 'title' },
  { title: '发布人', key: 'username' },
  { title: '置顶信息', key: 'topIndex' },
  {
    title: '信息最后修改时间',
    key: 'lastupdate',
    render(row) {
      return h('span', {}, Tools.formatDate(row.lastupdate as number, 'yyyy-MM-dd hh:mm:ss'))
    },
  },
  {
    title: '操作',
    key: 'action',
    width: 300,
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {
              queryBillboardInfo(row)
            },
          },
          '公告内容',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            onClick: () => {
              getModifyInfo(row)
            },
          },
          '修改',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              showDelete(row)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as Array<DataTableColumn<TbBillboard>>
</script>

<style scoped lang="scss"></style>
